<template>
  <div style="background-color: white">
    <!--//成功提示-->
    <el-button :plain="true" v-if="false">成功</el-button>

    <span style="color: grey">当前位置 >> 科研论著管理 >> 论著录入</span>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
             style="width: 500px;margin-left: 350px;margin-top: 100px">
      <el-form-item label="著作名称" prop="tname">
        <el-input type="text" v-model="ruleForm.tname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="图书编号" prop="isbn">
        <el-input type="text" v-model="ruleForm.isbn" autocomplete="off" @blur.prevent="changeIsbn"></el-input>
        <span v-if="this.torf === false" style="font-size: 10px;color: red">该论著已存在</span>
      </el-form-item>
      <el-form-item label="著作类别" prop="wcategory">
        <el-input type="text" v-model="ruleForm.wcategory" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="出版社" prop="publisher">
        <el-input type="text" v-model="ruleForm.publisher" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学科类别" prop="scategory">
        <el-input type="text" v-model="ruleForm.scategory" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input type="text" v-model="ruleForm.author" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="职工号" prop="pno">
        <el-input type="text" v-model="ruleForm.pno" autocomplete="off" @blur="changepNo"></el-input>
        <span v-if="this.torf1 === false" style="font-size: 10px;color: red">该职工号不存在</span>
      </el-form-item>

      <el-form-item label="出版时间" prop="pdate">
        <div class="block">
          <el-date-picker v-model="ruleForm.pdate"
                          type="date" style="width: 400px" placeholder="请选择出版时间">
          </el-date-picker>
        </div>
      </el-form-item>


      <el-form-item label="版次" prop="edition">
        <el-input type="text" v-model="ruleForm.edition" autocomplete="off"></el-input>
      </el-form-item>


      <el-form-item label="文件" prop="tfiles">
        <el-upload
            class="upload-demo"
            drag
            action="http://222.21.119.252:9999/files/upload"
            multiple
            list-type="text"
            :on-success="filesUploadSuccess"
            :on-error="filesUploadError"
            :before-upload="checkFileBefore"
            style="width: 400px"
            :data=fileVO
            :limit="1"
            :on-exceed='limitCheck'
        >
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">
            拖拽上传 或 <em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              仅支持上传一个文件,且最大容量为100MB
            </div>
          </template>
        </el-upload>
      </el-form-item>


      <el-form-item label="备注" prop="remark">
        <el-input type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容" v-model="ruleForm.remark" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="commit"
                   style="width:100%;  height:100%;margin-bottom:15px;">提交
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {UploadFilled} from "@element-plus/icons-vue";
import request from "@/utils/request";

export default {
  components: {
    UploadFilled
  },
  name: "addLunwen",
  data() {
    return {
      fileVO: {
        sort: 'treatise',
        fileName: ''
      },
      loadering: true,
      torf: true,
      torf1: true,
      ruleForm: {
        isbn: ''
      },
      rules: {
        tname: [
          {required: true, message: '著作名称不能为空', trigger: 'blur'},
          // {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
        isbn: [
          {required: true, message: '图书编号不能为空', trigger: 'blur'},
          // {min: 10, max: 35, message: '长度在 10 到 35 个字符', trigger: 'blur'}
        ],
        wcategory: [
          {required: true, message: '请输入论著类别', trigger: 'blur'},
        ],
        publisher: [
          {required: true, message: '出版社不能为空', trigger: 'blur'},
        ],
        scategory: [
          {required: true, message: '学科类别不能为空', trigger: 'blur'},
          // {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
        ],
        author: [
          {required: true, message: '作者不能为空', trigger: 'blur'},
        ],
        pno: [
          {required: true, message: '职工号不能为空', trigger: 'blur'},
          // {min: 12, max: 12, message: '长度为12个字符', trigger: 'blur'}
        ],
        pdate: [
          {required: true, message: '请选择出版时间', trigger: 'blur'},
        ],
        edition: [
          {required: true, message: '请输入版次', trigger: 'blur'},
        ],
        tfiles: [
          {required: true, message: '请上传文件资料', trigger: 'blur'}
        ],
      },
    };
  },
  methods: {
    commit() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          this.$message.error("请输入必选项!")
          return
        }
        request.post("/treatise", this.ruleForm).then(res => {
          if (res.code === '200') {
            //弹出成功框
            this.$message.success("添加成功")
          } else {
            this.$message.error("添加失败!请确保表单各项填写完整正确!");
          }
        }).catch(() => {   //防止未知bug,执行不了Controller方法直接报错
          this.$message.error("服务器错误!请联系管理员或重新尝试!");
        })
      })
    },
    changeIsbn() {
      if (this.ruleForm.isbn === '') {
        this.torf = true;
      } else {
        request.get(`/treatise/isbn/` + this.ruleForm.isbn).then(res => {
          if (res.code === '200') {
            //表示不重复,可以通过
            this.torf = true;
          } else {
            //重复,不能通过
            this.torf = false;
          }
        });
      }
    },
    changepNo() {
      console.log(this.ruleForm);
      if (this.ruleForm.pno === '') {
        this.torf1 = true;
      } else {
        request.get(`/sperson/pno/` + this.ruleForm.pno).then(res => {
          if (res.code === '200') {
            //表示没有,不能通过
            this.torf1 = false;
          } else {
            //表示有,则可以通过
            this.torf1 = true;
          }
        });
      }

    },
    //文件上传成功
    filesUploadSuccess(res) {
      this.ruleForm.tfiles = res.data;
    },
    //上传之前
    checkFileBefore(file) {

      if (this.ruleForm.isbn === '') {
        this.$message.error("上传文件前请先输入图书编号!");
        return false;
      }
      if (file.size / 1024 / 1024 > 100) {
        this.$message.error("文件大小不得超过100MB");
        return false;
      }

      //文件命名
      this.fileVO.fileName = this.ruleForm.isbn;

    },

    limitCheck() {
      this.$message.warning('只能上传一个文件');
    },


    filesUploadError(res) {
      console.log(res);
      if (res.code === '201') {
        this.$message.error(res.data.msg);
      } else {
        this.$message.error("上传失败,请重新尝试或联系管理员");
      }
    },
  }
}
</script>

<style scoped>

</style>
